<template>
    <div class="home-view">
        <mt-header fixed title="策略市场" class="mt-header"></mt-header>

        <ul>
            <li v-for="item in strategyList">
                <div class="item-header">
                    <div class="item-header-left">
                        <figure>
                            <img :src="item.pic" alt="">
                        </figure>
                        <h4>{{item.name}}</h4>
                    </div>
                    <router-link :to="{path: '/strategy-detail/'+item.id}" class="item-header-right">策略详情</router-link>
                </div>

                <div class="item-body">
                    <div class="item-body-line">
                        <div>
                            <p>{{item.yueshouyi || '0'}}</p>
                            <span>月均收益</span>
                        </div>
                        <div>
                            <p>{{item.pinzhong || '0'}}</p>
                            <span>主要品种</span>
                        </div>
                        <div>
                            <p>{{item.fengxianbaochoubi || '0'}}</p>
                            <span>风险报酬比</span>
                        </div>
                        <div>
                            <p>{{item.lishizuidahuiche || '0'}}</p>
                            <span>历史回撤</span>
                        </div>
                    </div>
                    <div class="item-body-line">
                        <div>
                            <p>{{item.zongtizhisun || '0'}}</p>
                            <span>总体止损</span>
                        </div>
                        <div>
                            <p>{{item.rineizhisun || '0'}}</p>
                            <span>日内止损</span>
                        </div>
                        <div>
                            <p>{{item.jiaoyipinlv || '0'}}</p>
                            <span>交易频率</span>
                        </div>
                        <div>
                            <p>{{item.ranking || '0'}}</p>
                            <span>推荐指数</span>
                        </div>
                    </div>
                </div>
            </li>
        </ul>

        <my-footer></my-footer> 
    </div>
</template>

<script>    
    import { mapState } from 'vuex'
    export default {
        name: 'HomeView',
        data() {
            return {

            }
        },
        computed: {
            ...mapState({
                strategyList: state => state.strategy.strategyList
            })
        },
        methods: {
            getStrategyList () {
                this.$store.dispatch('getStrategyList')
            }
        },
        created () {
            this.getStrategyList();
        }
    }
</script>

<style scoped>
    .home-view{
        margin-bottom: 50px;
        padding-top: 40px;
        background: #eee;
    }
    .home-view .mt-header {
        background: #fff;
        color: #666;
        border-bottom: 1px solid #FFF54C;
    }
    .home-view ul{
        list-style: none;
        margin: 0 0 15px 0;
        padding: 0;
    }
    .home-view ul li {
        margin: 5px 0;
        padding: 5px;
        background: #fff;
    }
    .item-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 5px;
        border-bottom: 1px solid #eee;
    }
    .item-header-left {
        display: flex;
        align-items: center;
    }
    .item-header figure {
        margin: 0 15px 0 0;
        width: 25px;
        height: 25px;
        border: 1px solid #ddd;
        border-radius: 50%;
        overflow: hidden;
        background: #fff;
        display: flex;
        align-items: center;
    }
    .item-header figure img {
        width: 100%;
        height: 100%;
    }
    .item-header h4 {
        margin: 0;
        font-size: 13px;
    }
    .item-header a {
        width: 80px;
        height: 25px;
        line-height: 27px;
        border-radius: 5px;
        background: #FFF54C;
        border:1px solid #eee;
        letter-spacing: 2px;
        text-decoration: none;
        color: #666;
        font-size: 12px;
    }

    .item-body-line {
        display: flex;
        padding: 3px 0;
    }
    .item-body-line > div {
        flex: 1;

        display: flex;
        flex-direction: column;
    }
    .item-body-line p {
        margin: 5px 0 5px 0;
        font-size: 12px;
        color: #555;
        line-height: 16px;
    }
    .item-body-line span {
        font-size: 12px;
        color: #999;
    }
</style>